<template>
  <div id="app" name="app">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="header-container">
        <div class="logo">
          <router-link to="/">
            <img src="./assets/imgs/logo.png" alt="图书商城" />
            <span class="site-name">BookStore</span>
          </router-link>
        </div>
        
        <div class="search-box">
          <input 
            type="text" 
            placeholder="搜索图书..." 
            v-model="search"
            @keyup.enter="searchClick"
          />
          <button class="search-btn" @click="searchClick">
            <i class="el-icon-search"></i>
          </button>
        </div>
        
        <nav class="main-nav">
          <router-link to="/" class="nav-item">首页</router-link>
          <router-link to="/goods" class="nav-item">全部图书</router-link>
          <router-link to="/about" class="nav-item">关于我们</router-link>
        </nav>
        
        <div class="user-actions">
          <div v-if="!isLoggedIn" class="auth-buttons">
            <button class="login-btn" @click="login">登录</button>
            <button class="register-btn" @click="register = true">注册</button>
          </div>
          <div v-else class="user-info">
            <el-dropdown trigger="click">
              <div class="user-dropdown">
                <i class="el-icon-user"></i>
                <span>{{this.$store.getters.getUser.userName}}</span>
                <i class="el-icon-arrow-down"></i>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="changeUserInfo">个人信息</el-dropdown-item>
                <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          
          <router-link to="/order" class="action-icon" title="我的订单">
            <i class="el-icon-tickets"></i>
          </router-link>
          
          <router-link to="/collect" class="action-icon" title="我的收藏">
            <i class="el-icon-star-off"></i>
          </router-link>
          
          <router-link to="/messages" class="action-icon" title="留言">
            <i class="el-icon-chat-dot-round"></i>
          </router-link>
          
          <router-link to="/shoppingCart" class="cart-icon" :class="{'has-items': getNum > 0}" title="购物车">
            <i class="el-icon-shopping-cart-2"></i>
            <span class="cart-count" v-if="getNum > 0">{{getNum}}</span>
          </router-link>
        </div>
      </div>
    </header>
    <!-- 顶部导航栏END -->

    <!-- 主要内容区域 -->
    <main class="main-content">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </main>
    <!-- 主要内容区域END -->

    <!-- 登录模块 -->
    <MyLogin></MyLogin>
    <!-- 注册模块 -->
    <MyRegister 
      @beforeClose="beforeClose" 
      :isChangeUserInfo="isChangeUserInfo" 
      :register="register" 
      @fromChild="isRegister"
    />

    <!-- 页脚 -->
    <footer class="footer">
      <div class="footer-container">
        <div class="footer-links">
          <div class="link-section">
            <h3>购物指南</h3>
            <router-link to="/">购物流程</router-link>
            <router-link to="/">会员介绍</router-link>
            <router-link to="/">常见问题</router-link>
          </div>
          <div class="link-section">
            <h3>配送方式</h3>
            <router-link to="/">上门自提</router-link>
            <router-link to="/">快递运输</router-link>
            <router-link to="/">配送服务</router-link>
          </div>
          <div class="link-section">
            <h3>支付方式</h3>
            <router-link to="/">货到付款</router-link>
            <router-link to="/">在线支付</router-link>
            <router-link to="/">分期付款</router-link>
          </div>
          <div class="link-section">
            <h3>售后服务</h3>
            <router-link to="/">退款说明</router-link>
            <router-link to="/">返修/退换货</router-link>
            <router-link to="/">取消订单</router-link>
          </div>
        </div>
        
        <div class="footer-promise">
          <div class="promise-item">
            <i class="el-icon-refresh"></i>
            <span>7天无理由退换</span>
          </div>
          <div class="promise-item">
            <i class="el-icon-truck"></i>
            <span>满99元包邮</span>
          </div>
          <div class="promise-item">
            <i class="el-icon-medal"></i>
            <span>正品保障</span>
          </div>
        </div>
        
        <div class="copyright">
          <p>© 2025 BookStore 图书商城 版权所有</p>
        </div>
      </div>
    </footer>
    <!-- 页脚END -->
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";

export default {
  beforeUpdate() {
    this.activeIndex = this.$route.path;
  },
  data() {
    return {
      activeIndex: "", // 头部导航栏选中的标签
      search: "", // 搜索条件
      register: false, // 是否显示注册组件
      visible: false, // 是否退出登录
      isChangeUserInfo: false
    };
  },
  created() {
    // 获取浏览器localStorage，判断用户是否已经登录
    if (localStorage.getItem("user")) {
      // 如果已经登录，设置vuex登录状态
      this.setUser(JSON.parse(localStorage.getItem("user")));
    }
  },
  computed: {
    ...mapGetters(["getUser"]),
    isLoggedIn() {
      return !!this.getUser;
    },
    userName() {
      return this.getUser ? this.getUser.name : '';
    }
  },
  watch: {
    // 获取vuex的登录状态
    getUser(val) {
      if (!val) {
        // 用户没有登录
        this.setShoppingCart([]);
      } else {
        // 用户已经登录,获取该用户的购物车信息
        this.$axios
          .post("/api/user/shoppingCart/getShoppingCart", {
            user_id: val.user_id
          })
          .then(res => {
            if (res.data.code === "001") {
              // 001 为成功, 更新vuex购物车状态
              this.setShoppingCart(res.data.shoppingCartData);
            } else {
              // 提示失败信息
              this.notifyError(res.data.msg);
            }
          })
          .catch(err => {
            return Promise.reject(err);
          });
      }
    }
  },
  methods: {
    ...mapActions(["setUser", "setShowLogin", "setShoppingCart"]),
    beforeClose() {
      this.isChangeUserInfo = false
      this.register = false
    },
    changeUserInfo() {
      this.isChangeUserInfo = true
      this.register = true
    },
    login() {
      // 点击登录按钮, 通过更改vuex的showLogin值显示登录组件
      this.setShowLogin(true);
    },
    // 退出登录
    logout() {
      this.visible = false;
      // 清空本地登录信息
      localStorage.setItem("user", "");
      // 清空vuex登录信息
      this.setUser("");
      this.notifySucceed("成功退出登录");
      this.$router.push('/')
    },
    // 接收注册子组件传过来的数据
    isRegister(val) {
      this.register = val;
    },
    // 点击搜索按钮
    searchClick() {
      if (this.search != "") {
        // 跳转到全部商品页面,并传递搜索条件
        this.$router.push({ path: "/goods", query: { search: this.search } });
        this.search = "";
      }
    }
  }
};
</script>

<style>
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

body {
  background-color: #f5f5f5;
  color: #333;
  line-height: 1.6;
}

a {
  text-decoration: none;
  color: inherit;
}

/* 布局容器 */
.header-container, 
.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 顶部导航栏样式 */
.header {
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 15px 0;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
}

.logo img {
  height: 40px;
  margin-right: 10px;
}

.site-name {
  font-size: 22px;
  font-weight: bold;
  color: #2c3e50;
}

.search-box {
  display: flex;
  align-items: center;
  width: 300px;
  margin: 0 20px;
}

.search-box input {
  flex: 1;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s;
}

.search-box input:focus {
  border-color: #409EFF;
}

.search-btn {
  background-color: #409EFF;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  transition: background-color 0.3s;
}

.search-btn:hover {
  background-color: #66b1ff;
}

.main-nav {
  display: flex;
  margin-right: auto;
}

.nav-item {
  padding: 10px 15px;
  color: #666;
  font-size: 16px;
  transition: color 0.3s;
  position: relative;
}

.nav-item:hover, 
.nav-item.router-link-exact-active {
  color: #409EFF;
}

.nav-item.router-link-exact-active::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 15px;
  right: 15px;
  height: 2px;
  background-color: #409EFF;
}

.user-actions {
  display: flex;
  align-items: center;
}

.auth-buttons {
  display: flex;
  gap: 10px;
}

.login-btn, .register-btn {
  padding: 8px 15px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.login-btn {
  background-color: transparent;
  border: 1px solid #409EFF;
  color: #409EFF;
}

.login-btn:hover {
  background-color: #ecf5ff;
}

.register-btn {
  background-color: #409EFF;
  color: white;
  border: none;
}

.register-btn:hover {
  background-color: #66b1ff;
}

.user-info {
  margin-right: 15px;
}

.user-dropdown {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #666;
  transition: color 0.3s;
}

.user-dropdown:hover {
  color: #409EFF;
}

.user-dropdown i {
  margin-right: 5px;
}

.action-icon {
  font-size: 20px;
  color: #666;
  margin: 0 10px;
  transition: color 0.3s;
}

.action-icon:hover {
  color: #409EFF;
}

.cart-icon {
  position: relative;
  font-size: 20px;
  color: #666;
  margin-left: 10px;
  transition: color 0.3s;
}

.cart-icon:hover {
  color: #409EFF;
}

.cart-count {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: #f56c6c;
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 主要内容区域 */
.main-content {
  min-height: calc(100vh - 160px);
  padding: 20px 0;
}

/* 页脚样式 */
.footer {
  background-color: #2c3e50;
  color: #fff;
  padding: 40px 0 20px;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-bottom: 30px;
}

.link-section h3 {
  font-size: 18px;
  margin-bottom: 15px;
  color: #fff;
}

.link-section a {
  display: block;
  color: #bdc3c7;
  margin-bottom: 10px;
  transition: color 0.3s;
}

.link-section a:hover {
  color: #409EFF;
}

.footer-promise {
  display: flex;
  justify-content: center;
  gap: 50px;
  margin-bottom: 30px;
  padding: 20px 0;
  border-top: 1px solid #3d3d3d;
  border-bottom: 1px solid #3d3d3d;
}

.promise-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
}

.promise-item i {
  font-size: 24px;
  color: #409EFF;
}

.copyright {
  text-align: center;
  color: #bdc3c7;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .header-container {
    flex-wrap: wrap;
  }
  
  .search-box {
    order: 3;
    width: 100%;
    margin: 15px 0;
  }
  
  .main-nav {
    order: 2;
    margin: 15px 0;
  }
  
  .footer-links {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .footer-promise {
    flex-direction: column;
    gap: 15px;
    align-items: center;
  }
  
  .main-nav {
    display: none;
  }
}
</style>